<template>
  <li class="CollectionCard">
    <van-card :price="item.price" :title="item.store_name">
      <template #thumb>
        <van-image :src="item.image"></van-image>
      </template>
      <template #num>
        <span class="CollectionCard_del" @click="delCollect">删除</span>
      </template>
    </van-card>
  </li>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  props: ["item"],
  computed: {
    ...mapState({
      token: (state) => state.data.token,
    }),
  },
  methods: {
    ...mapActions(["getCollectlist"]),
    delCollect() {
      this.$toast("删除收藏成功！");
      setTimeout(() => {
        this.axios
          .post("/api/collect/del", {
            category: "product",
            id: this.item.pid,
          })
          .then((response) => {
            if (response.data.status == 200) {
              this.getCollectlist(this.token);
            } else {
              console.log("失败");
            }
          });
      }, 2000);
    },
  },
};
</script>

<style lang="less">
.CollectionCard {
  width: 100%;
  border-bottom: 1px solid #eee;
  .van-card {
    width: 100%;
    background-color: #fff;
    .van-card__header {
      width: 100%;
      .van-card__thumb {
        width: 80px;
        height: 80px;
        .van-image {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 4px;
          }
        }
      }
      .van-card__content {
        width: 100%;
        min-height: auto;
        > div {
          width: 100%;
          .van-multi-ellipsis--l2 {
            font-size: 14px;
            -webkit-line-clamp: 1;
          }
        }
        .van-card__bottom {
          .van-card__price {
            color: red;
          }
          .van-card__num {
            .CollectionCard_del {
              color: black;
              border: 1px solid #d9d9d9;
              padding: 4px 15px;
            }
          }
        }
      }
    }
  }
}
</style>